<!DOCTYPE html>
<html lang="en" xmlns:margin-top="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            #div_1{
            width: 500px;
             height: 330px;
            float :right
        }
        #div_2{

            width: 500px;
             height: 330px;
            float :right
        }
        #div_3{

            width: 500px;
             height: 330px;
            float :right
        }
        #div_4{

            width: 500px;
             height: 330px;
            float :right
        }
        #div_5{

            width: 500px;
             height: 330px;
            float ：left
        }
        #div_6{

            width: 500px;
             height: 330px;
<!--            float :left-->

             position: absolute; /* 内部div绝对定位 */
            bottom: 0; /* 底部对齐 */
            left: 10px; /* 左侧对齐 */
            padding: -20px;
        }
        body {
    /* 设置背景图片 */
    background-image: url('../static/img.png');
    /* 设置背景图片填充整个屏幕 */
    background-size: cover;
    /* 设置背景图片不重复 */
    background-repeat: no-repeat;
    /* 设置背景图片居中显示 */
    background-position: center;
}


    </style>
     <!--    导入echarts需要使用的jar包  -->
        <script src="../static/js/echarts.js"></script>
        <script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="div_0">
    <div id="div_1"></div>
    <div id="div_2"></div>
    <div id="div_3"  style="margin-top: 5px;"></div>
    <div id="div_4"  style="margin-top: 5px;"></div>
    <div id="div_5" ></div>
    <div id="div_6"></div>
</div>
</body>
<!--     使用echarts构图  -->
<script type="text/javascript">
//  定义函数解决传递过来的数据中文编码问题，对数据进行中文解码
function recoding_data(data){-
        //  定义列表轴数据
        var x_data=[];
        var y_data=[];
        var z_data=[];
       //   对数据进行遍历，并且参数写成匿名函数(也就是对列表里面每一个字典都进行匿名函数的操作)
       data.forEach(function(dict){
             // 使用遍历的方式查看json数据的键值对个数
             var length=0;
             for (var name in dict){
                // 检查属性是否是对象自身的属性而不是原型链上的属性
                if (dict.hasOwnProperty(name)) {
                        // 对象的属性数量加一
                           length++;
                         }
                         }
            //  判断是否是两个元素的数据:
            if (length==2){
                //    使用 decodeURIComponent 解码中文字符
                var x=decodeURIComponent(dict.name);
                x_data.push(x);
                y_data.push(dict.value);
                                    }
              else{
                 //    使用 decodeURIComponent 解码中文字符
                var x=decodeURIComponent(dict.key0);
                var y=decodeURIComponent(dict.key1);
                x_data.push(x);
                y_data.push(y);
                z_data.push(dict.key2);
              }

            } );
            //  判断z_data是否为空，不为空的话就是有三条数据
		if (z_data.length==0){
			//   将x和y轴的数据都返回
			return [x_data,y_data];
		}
		else{
		    //   返回三列数据
			return [x_data,y_data,z_data];
		}

}


    //  图1_柱状图(岗位在全国各地的分布top10)
    //  初始化echarts
    var myChart1=echarts.init(document.getElementById("div_1"));
     // 表1的数据(列表嵌套字典形式)
     var data1={{table1|tojson}};
     // 拿到解码后的x和y轴的数据
     x_data=recoding_data(data1)[0]
     y_data=recoding_data(data1)[1]
        //  对图表进行设置
        var option = {
        backgroundColor:'', //设置无背景色
            title: {
                text: '岗位全国分布数量top10',
                textStyle: {
            fontWeight: 'bold', // 设置标题字体加粗
             color: 'red' // 设置标题字体颜色为红色
                }
            },
             tooltip: {
                        show: true
                    },
            legend: {
                data:['分布数量'] // 图例数据
            },
            grid: {
                left: '5%',
                width:'90%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: x_data,
                 textStyle: {
                     fontWeight: 'bold', // 设置汉字加粗
                      color: 'red' // 设置汉字颜色，例如红色
                         }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'数量', // 系列名称
                    type:'bar', // 图表类型
                    data:  y_data
                }
            ],
            //  设置x轴上字体的颜色为红色
            textStyle: {
                     fontWeight: 'bold', // 设置汉字加粗
                      color: 'red' // 设置汉字颜色，例如红色
                         }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);



        //  图形二:双折线图(岗位分布数量大于30的地区的平均薪资)
        //  初始化图形
        var myChart2=echarts.init(document.getElementById('div_2'));
        //  将拿到的数据中文解码
        var data2={{table2|tojson}};
        var x_data=recoding_data(data2)[0];
        var y_data1=recoding_data(data2)[1];
        var y_data2=recoding_data(data2)[2];
        console.log(y_data2)
        //  开始配置图形
         var option = {
         backgroundColor:'', //设置无背景色
            title: {
                text: '分布数量大于30的地区的平均薪资',
                  textStyle: {
            fontWeight: 'bold', // 设置标题字体加粗
             color: 'red' // 设置标题字体颜色为红色
                }
            },
           tooltip: {
                        show: true
                    },
            grid: {
                left: '5%',
                width:'90%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['岗位数量', '平均薪资'],
                 right:20,
                  textStyle: {
                     fontWeight: 'bold', // 设置汉字加粗
                      color: 'red' // 设置汉字颜色，例如红色
                         }
            },
            xAxis: {
                type: 'category',
                data:x_data,
                textStyle: {
                     fontWeight: 'bold', // 设置汉字加粗
                      color: 'red' // 设置汉字颜色，例如红色
                         }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '岗位数量',
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                },
                {
                    type: 'value',
                    name: '平均薪资',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                }
            ],
            series: [
                {
                    name: '岗位数量',
                    type: 'line',
                    data: y_data1, // 岗位数量数据
                    yAxisIndex: 0,
                    itemStyle: {
                        color: 'yellow' // 可以自定义颜色
                    }
                },
                {
                    name: '平均薪资',
                    type: 'line',
                    data: y_data2, // 平均薪资数据
                    yAxisIndex: 1,
                    itemStyle: {
                        color: 'red' // 可以自定义颜色
                    }
                }
            ],
            //  设置x轴上字体的颜色为红色
            textStyle: {
                     fontWeight: 'bold', // 设置汉字加粗
                      color: 'red' // 设置汉字颜色，例如红色
                         }
        };
        // 使用刚指定的配置项和数据显示图表
        myChart2.setOption(option);

        //  图三:词云图(根据企业对学生技术要求，学历要求，工作经验要求进行绘制词云图)
        //  初始化echarts
        var myChart3=echarts.init(document.getElementById('div_3'));
        //  拿到数据，这里不知道为啥不需要解码
        var data3={{table3|tojson}}
        //  对图形的设置
         var option = {
         backgroundColor:'', //设置无背景色
          title: {
                text: '招聘要求词云图',
                  textStyle: {
            fontWeight: 'bold', // 设置标题字体加粗
             color: 'red' // 设置标题字体颜色为红色
                }
            },
                series: [{
                    type: 'wordCloud',
                   //maskImage: maskImage,
                    sizeRange: [15, 80],
                    rotationRange: [0, 0],
                    rotationStep: 45,
                    gridSize: 8,
                    shape: 'pentagon',
                    width: '100%',
                    height: '85%',
                     textStyle: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: data3
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option);
            window.addEventListener("resize", function() {
                myChart3.resize();
            });

            //  图四:词云图(公司的特点特征)
            //  初始化
            var myChart4=echarts.init(document.getElementById('div_4'));
            //  拿到数据
            var data4={{table4|tojson}}
            //  设置图形
            var option = {
            backgroundColor:'', //设置无背景色
            title: {
                text: '公司特点特征',
                  textStyle: {
            fontWeight: 'bold', // 设置标题字体加粗
             color: 'red' // 设置标题字体颜色为红色
                }
            },
                series: [{
                    type: 'wordCloud',
                   //maskImage: maskImage,
                    sizeRange: [15, 80],
                    rotationRange: [0, 0],
                    rotationStep: 45,
                    gridSize: 8,
                    shape: 'pentagon',
                    width: '85%',
                    height: '85%',
                     textStyle: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 255),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            },

                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: data4
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart4.setOption(option);
            window.addEventListener("resize", function() {
                myChart4.resize();
            });

            //  图五:(南丁尔格玫瑰图:对于公司企业的经营方式的种类数量可视化)
            //  初始化echarts
            var myChart5=echarts.init(document.getElementById('div_5'));
            //   拿到数据打印数据查看是否需要解码
            var data5={{table5|tojson}};
            console.log(data5);
            //  配置南丁尔格玫瑰图
             var option = {
             backgroundColor:'', //设置无背景色
            label:{
                    show:true,
                     position:'inside', //inside 扇形图上 ，center 扇形图中间 ,  outside  扇形图外面
                },

            title: {
                text: '公司企业经营方式展示',
                button:'5%',
                  textStyle: {
            fontWeight: 'bold', // 设置标题字体加粗
             color: 'red' // 设置标题字体颜色为红色
                }
            },
            tooltip: {
                        show: true
                    },
            grid: {
                left: '5%',
                width:'90%',
                bottom: '3%',
                containLabel: true,
                height:'80%'
            },
            series: [{
<!--                name: '访问来源',-->
                type: 'pie',
                radius: [60, '70%'], // 控制环形大小
                roseType: 'area', // 设置为南丁格尔玫瑰图
                data:data5
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart5.setOption(option);

        //  图六(饼图:招聘信息对工作经验的要求)
        //  初始化echarts
        var myChart6=echarts.init(document.getElementById('div_6'));
        //  拿到数据检查是否需要解码
        var data6={{table6|tojson}};
        console.log(data6);
        //  配置图形
        option = {
        backgroundColor:'', //设置无背景色


        title: {
                text: '公司企业对工作经验的要求',
                  textStyle: {
            fontWeight: 'bold', // 设置标题字体加粗
             color: 'red' // 设置标题字体颜色为红色
                }
            },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '85%',
    left: 'center',
    textStyle: {
        fontWeight: 'bold', // 设置汉字加粗
        color: 'red' // 设置汉字颜色，例如黑色
    }
  },

  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center',

      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data6
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
        myChart6.setOption(option);















</script>


</html>